<!--
--按揭楼房
-->
<template>
  <div class="main clearfix">
    <!-- 查询 -->
    <section class="section_wrap wrap_te">
      <el-form
        :inline="true"
        style="text-align: left"
        :model="query"
        ref="query"
        class="query query_top_wrap clearfix"
      >
        <el-form-item label="关键词:" prop="keyword">
          <el-input
            placeholder="订单号、客户名称、客户手机"
            v-model="query.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item label="归属公司:" prop="firmId">
          <el-select
            v-model="query.firmId"
            placeholder="请选择"
            @change="companyChange"
            popper-class="selectBox"
          >
            <el-option
              v-for="item in companyData"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属部门:" prop="deptId">
          <treeselect
            class="treeSel"
            :options="deptData"
            :clearable="false"
            v-model="query.deptId"
            :normalizer="normalizer"
            @select="handleNodeClick"
            placeholder="请选择部门"
            noOptionsText="请先选择归属公司"
          />
        </el-form-item>
        <el-form-item label="归属人员:" prop="employeeId">
          <el-select v-model="query.employeeId" placeholder="请选择">
            <el-option
              v-for="item in personnelData"
              :key="item.id"
              :label="item.employeeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态:" prop="orderState">
          <el-select v-model="query.orderState" placeholder="请选择">
            <el-option
              v-for="item in orderStatusData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属人员类型:" prop="employeeTypeId">
          <el-select v-model="query.employeeTypeId" placeholder="请选择">
            <el-option
              v-for="item in personnelTypeData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提成核算:" prop="calculationState">
          <el-select v-model="query.calculationState" placeholder="请选择">
            <el-option
              v-for="item in calculationStateData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="由我批准:" prop="approvalByMeState">
          <el-select v-model="query.approvalByMeState" placeholder="请选择">
            <el-option
              v-for="item in approvalByMeStateData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新提醒:" prop="markUpdate">
          <el-select v-model="query.markUpdate" placeholder="请选择">
            <el-option
              v-for="item in markUpdateData"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入日期:" prop="grantTime">
          <el-date-picker
            v-model="query.grantTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:210px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收费状态:" prop="chargeStatus">
          <el-select v-model="query.chargeStatus" placeholder="请选择">
            <el-option
              v-for="item in chargeStatus"
              :key="item.itemValue"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="button">
          <el-button type="danger" @click="emptyFun">清空</el-button>
          <el-button type="primary" @click="queryFun">搜索</el-button>
        </el-form-item>
      </el-form>
    </section>

    <section class="section_wrap">
      <el-form>
        <el-row>
          <el-col :xl="24">
            <el-form-item class="btn_top_wrap">
              <el-button v-if="showExporBtn" @click="orderExport"
                >+导出</el-button
              >
              <el-button v-if="showNewSingLe" @click="NewAccfund"
                >+录入新单</el-button
              >
              <!-- <el-button v-if="showWaitingLoanOrder" @click="orderExportToWaite"
                >+导出待放款</el-button
              > -->
              <span
                style="float:right;line-height:18px;margin-top: 10px;"
                v-if="showNewNum"
                >您有<b
                  ><el-badge :value="newNum" :max="99" class="item">
                  </el-badge></b
                >条未做处理</span
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :data="tableData"
        :inline="true"
        border
        stripe
        style="width: 100%"
        class="bus_tabel"
        :row-key="getRowKey"
        @selection-change="changeFun"
        ref="multipleTable"
      >
        <el-table-column
          type="selection"
          width="36"
          :reserve-selection="true"
          class-name="checkBox"
        ></el-table-column>
        <el-table-column
          prop="orderNumber"
          label="业务单号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="borrowerName"
          label="客户名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="address"
          label="客户地区"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="orderMoney"
          label="审批金额(万元)"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="belongCompany"
          label="归属公司"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="belongDepartment"
          label="归属部门"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="belongEmployee"
          label="归属人员"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="belongType"
          label="归属人员类型"
          :formatter="translaPersonnel"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="inputTime"
          label="录入日期"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="inputName"
          label="录入人"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="channelName"
          label="推广员"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="calculationState"
          label="提成核算"
          :formatter="translaCalculation"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="approveName"
          label="审批进展"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="approvalByMeState"
          label="由我审批"
          label-class-name="tips"
          :formatter="translaApprovalByMe"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新日期"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="markUpdate"
          label="更新提醒"
          :formatter="translaMarkUpdate"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          :formatter="translaOrderStatus"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="chargeStatusName" label="财务收费" />
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 0 && showHasBeenRecorded"
              @click="HasBeen(scope.row)"
              style="color:#45B8EF"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 1 && showExaminationBtn"
              @click="Examination(scope.row)"
              style="color:#8858AC"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 2 && showToSubmitBtn"
              @click="ToSubmit(scope.row)"
              style="color:#FFA42F"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 3 && showToBeLentBtn"
              @click="ToBeLent(scope.row)"
              style="color: #FFA42F"
              >查看</el-button
            >
            <!--end 已放款-->
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 4 && showReleaseddBtn"
              @click="Released(scope.row)"
              style="color: #FFA42F"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 5 && showTerminatedBtn"
              @click="Terminated(scope.row)"
              style="color:#FB575E"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.orderStatus == 6 && showStopTermBtn"
              @click="Terminated(scope.row)"
              style="color:#FB575E"
              >查看</el-button
            >
            <span v-if="scope.row.orderStatus !== 5">
              <el-button
                @click="suspendFun(scope.row)"
                v-if="scope.row.orderStatus !== 6 && showOrderDeteBtn"
                type="text"
                size="small"
                style="color:#FB575E"
                >中止</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagination page_wrap">
        <span class="title">小计：共{{ this.total }}条数据</span>
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="total"
          :page-size="query.pagesize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </section>
    <el-dialog
      title="中止订单"
      @close="beforeClose"
      :visible.sync="dialogsuspendFun"
      width="30%"
    >
      <el-form
        :model="suspend"
        :rules="rules"
        ref="suspendForm"
        label-width="120px"
      >
        <el-form-item label="订单号:" style="text-align:left">{{
          suspend.orderNumber
        }}</el-form-item>
        <el-form-item label="客户姓名：" style="text-align:left">{{
          suspendInf.name
        }}</el-form-item>
        <el-form-item label="描述信息：" prop="operationCause">
          <el-input type="textarea" v-model="suspend.operationCause"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogsuspendFun = false">取 消</el-button>
        <el-button type="primary" @click="submitsuspendFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "@/assets/style/bussiness.css";
import { expotOut, GMTToStr, checkPermiss } from "../../assets/js/utlis";
import {
  pagelist,
  getDepartment,
  postCompanyEmployList,
  getEmployee,
  getRedOrderList,
  delOrder
} from "../../../src/assets/js/api";
export default {
  components: { Treeselect },
  data() {
    return {
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
      },
      tableData: [],
      dialogsuspendFun: false,
      newNum: "",
      currentPage: 1,
      total: 10,
      query: {
        pageNo: 1,
        keyword: null,
        firmId: null,
        deptId: null,
        employeeId: null,
        employeeTypeId: null,
        calculationState: null,
        approvalByMeState: null,
        markUpdate: null,
        orderState: null,
        prductId: "",
        grantTime: null
      },
      //查询未处理订单数量
      valQuerryBy: {
        prductId: "",
        approvalByMeState: 1
      },
      queryData: {},
      //订单状态
      orderStatusData: [],
      // 人员类型
      personnelTypeData: [],
      //财务收费状态
      chargeStatus: [],
      markUpdateData: [],
      // 提成核算状态
      calculationStateData: [],
      // 公司数据
      companyData: [],
      // 部门数据
      deptData: [],
      // 人员数据
      personnelData: [],
      // 是否由我审批
      approvalByMeStateData: [],
      queryPersonnel: {},
      //权限
      golbalPermissions: [],
      //导出需要传的参数
      fileParmas: {
        keyword: null,
        firmId: null,
        deptId: null,
        employeeId: null,
        employeeTypeId: null,
        calculationState: null,
        approvalByMeState: null,
        markUpdate: null,
        orderState: null,
        prductId: ""
      },
      suspend: {
        orderNumber: "",
        operationCause: ""
      },
      suspendInf: {
        name: null
      },
      rules: {
        operationCause: [
          { required: true, message: "请填写中止原因", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    //未处理时是0隐藏
    showNewNum: function() {
      return this.newNum == 0 ? false : true;
    },
    //导出订单按钮
    showExporBtn: function() {
      return checkPermiss(
        "business:redeem:exportOrder",
        this.golbalPermissions
      );
    },
    //导出待放款按钮
    showWaitingLoanOrder: function() {
      return checkPermiss(
        "business:redeem:waitingLoanOrder",
        this.golbalPermissions
      );
    },
    //录入新单按钮
    showNewSingLe: function() {
      return checkPermiss("index:redeem:newAccfund", this.golbalPermissions);
    },
    //订单中止按钮
    showOrderDeteBtn: function() {
      return checkPermiss("index:redeem:Terminated", this.golbalPermissions);
    },
    //已录入按钮
    showHasBeenRecorded: function() {
      return checkPermiss("index:redeem:EntertMort", this.golbalPermissions);
    },
    //审批中按钮
    showExaminationBtn: function() {
      return checkPermiss("index:redeem:ExaminMort", this.golbalPermissions);
    },
    //待交件按钮
    showToSubmitBtn: function() {
      return checkPermiss("index:redeem:ToSubmitAcc", this.golbalPermissions);
    },
    //待放款按钮
    showToBeLentBtn: function() {
      return checkPermiss("index:redeem:ToBeLentMort", this.golbalPermissions);
    },
    //已放款按钮
    showReleaseddBtn: function() {
      return checkPermiss("index:redeem:ReleasedMort", this.golbalPermissions);
    },
    //已回款
    showTerminatedBtn: function() {
      return checkPermiss("index:redeem:TermMort", this.golbalPermissions);
    },
    //已中止
    showStopTermBtn: function() {
      return checkPermiss("index:redeem:StopTermMort", this.golbalPermissions);
    }
  },
  created() {
    this.query.prductId = sessionStorage.getItem("prductId");
    this.valQuerryBy.prductId = sessionStorage.getItem("prductId");
    this.queryData = JSON.parse(JSON.stringify(this.query));
    //获取权限
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.orderStatus();
    this.personnelType();
    this.approvalByMeState();
    this.companylist();
    this.calculationState();
    this.markUpdate();
    this.getOrderList(this.query);
    this.getOrderNumBy();
  },
  methods: {
    //录入新单
    NewAccfund() {
      this.$router.push({
        path: "/Index/NewMort"
      });
    },
    // 已录入
    HasBeen(row) {
      let pathUrl = this.$route.path;
      sessionStorage.setItem("orderNumber", row.orderNumber);
      this.$router.push({
        path: "/Index/EntertMort",
        query: { path: pathUrl } //记录跳入录入新单进口路径
      });
    },
    //审批中
    Examination(row) {
      let pathUrl = this.$route.path;
      sessionStorage.setItem("orderNumber", row.orderNumber);
      this.$router.push({
        path: "/Index/ExaminMort",
        query: { path: pathUrl } //记录跳入录入新单进口路径
      });
    },
    //待交件
    ToSubmit(row) {
      sessionStorage.setItem("orderNumber", row.orderNumber);
      this.$router.push("/Index/TosubmitMort");
    },
    //待放款
    ToBeLent(row) {
      sessionStorage.setItem("orderNumber", row.orderNumber);
      this.$router.push({
        path: "/Index/ToBeLentMort",
        query: { status: false }
      });
    },
    // 已放款
    Released(row) {
      sessionStorage.setItem("orderNumber", row.orderNumber);
      this.$router.push("/Index/ReleasedMort");
    },
    // 已终止
    Terminated(row) {
      sessionStorage.setItem("orderNumber", row.orderNumber);
      this.$router.push("/Index/TermMort");
    },
    // 归属公司
    companylist() {
      pagelist().then(res => {
        this.companyData = res.data;
      });
    },
    // 通过选中公司id查询部门
    companyChange(val) {
      this.query.firmId = val;
      this.queryPersonnel.firmId = val;
      this.query.deptId = null;
      getDepartment(val).then(res => {
        this.deptData = res.data;
      });
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取部门id
    handleNodeClick(data) {
      this.query.deptId = data.id;
      this.queryPersonnel.deptId = data.id;
      this.postCompanyEmployList(this.queryPersonnel);
    },
    // 获取归属人员数据
    postCompanyEmployList() {
      postCompanyEmployList(this.queryPersonnel).then(res => {
        this.personnelData = res.data;
      });
    },
    // 订单状态
    orderStatus() {
      getEmployee("sl_order_state").then(res => {
        this.orderStatusData = res.data;
      });
    },
    // 人员类型
    personnelType() {
      getEmployee("emp_type").then(res => {
        this.personnelTypeData = res.data;
      });
    },
    // 提成核算状态
    calculationState() {
      getEmployee("calculation_state").then(res => {
        this.calculationStateData = res.data;
      });
      //财务收费状态chargeStatus
      getEmployee("charge_status").then(res => {
        this.chargeStatus = res.data;
      });
    },
    // 更新提醒
    markUpdate() {
      getEmployee("mark_update").then(res => {
        this.markUpdateData = res.data;
      });
    },
    // 是否由我审批
    approvalByMeState() {
      getEmployee("approval_by_me_state").then(res => {
        this.approvalByMeStateData = res.data;
      });
    },
    // 批量
    getRowKey(row) {
      return row.orderId;
    },
    changeFun(val) {
      this.ids = val.map(item => item.orderNumber);
      this.orderExportId = val.map(item => item.orderId);
    },
    // 归属人员类型翻译
    translaPersonnel(row) {
      return this.selectDictLabel(this.personnelTypeData, row.belongType);
    },
    // 提成核算状态翻译
    translaCalculation(row) {
      return this.selectDictLabel(
        this.calculationStateData,
        row.calculationState
      );
    },
    // 由我审批翻译
    translaApprovalByMe(row) {
      return this.selectDictLabel(
        this.approvalByMeStateData,
        row.approvalByMeState
      );
    },
    // 更新提醒翻译
    translaMarkUpdate(row) {
      if (row.markUpdate > 0) {
        return "有更新";
      } else {
        return "无更新";
      }
      //return this.selectDictLabel(this.markUpdateData, row.markUpdate);
    },
    // 订单状态翻译
    translaOrderStatus(row) {
      return this.selectDictLabel(this.orderStatusData, row.orderStatus);
    },
    //获取订单
    getOrderList(obj) {
      getRedOrderList(obj).then(res => {
        this.tableData = res.data.records;
        this.pagesize = res.data.size;
        this.pageNo = res.data.current;
        this.total = res.data.total;
        this.pages = res.data.pages;
      });
    },
    //获取未处理数量
    getOrderNumBy() {
      getRedOrderList(this.valQuerryBy).then(res => {
        this.newNum = res.data.total;
        this.$forceUpdate();
      });
    },
    //导出订单
    orderExport() {
      this.fileParmas = this.queryData;
      this.queryData.pageNo = 1;
      this.queryData.prductId = sessionStorage.getItem("prductId");
      if (this.orderExportId) {
        this.fileParmas.idList = this.orderExportId;
      } else {
        this.fileParmas.idList = null;
      }
      expotOut(
        "post",
        "/business/redeem/exportOrder",
        this.fileParmas, // 导出请求参数
        "按揭赎楼" // 导出文件名字
      );
    },
    //导出待放款订单
    orderExportToWaite() {
      let fileParmas = {
        orderState: 3,
        prductId: this.query.prductId
      };
      expotOut(
        "get",
        "/business/order/exportOrder",
        fileParmas, // 导出请求参数
        "按揭赎楼待放款" // 导出文件名字
      );
    },
    // 搜索按钮
    queryFun() {
      this.queryData = JSON.parse(JSON.stringify(this.query));
      this.queryData.pageNo = 1;
      this.queryData.prductId = sessionStorage.getItem("prductId");
      //录入日期
      if (this.queryData.grantTime && this.queryData.grantTime[0]) {
        this.queryData.inputMin = GMTToStr(this.queryData.grantTime[0]);
        this.queryData.inputMax = GMTToStr(this.queryData.grantTime[1]);
      }
      delete this.queryData.grantTime;
      this.getOrderList(this.queryData);
      this.currentPage = 1;
      //清空多选
      this.$refs["multipleTable"].clearSelection();
    },
    // 清空按钮
    emptyFun() {
      this.$refs["query"].resetFields();
      this.query.grantTime = null;
      (this.deptData = []),
        (this.personnelData = []),
        (this.queryData = JSON.parse(JSON.stringify(this.query)));
      this.queryData.prductId = sessionStorage.getItem("prductId");
      //录入日期
      if (this.queryData.grantTime && this.queryData.grantTime[0]) {
        this.queryData.inputMin = GMTToStr(this.queryData.grantTime[0]);
        this.queryData.inputMax = GMTToStr(this.queryData.grantTime[1]);
      }
      delete this.queryData.grantTime;
      this.getOrderList(this.queryData);
      this.currentPage = 1;
      //清空多选
      this.$refs["multipleTable"].clearSelection();
    },
    //分页
    handleCurrentChange(cpage) {
      this.queryData.pageNo = cpage;
      //录入日期
      if (this.queryData.grantTime && this.queryData.grantTime[0]) {
        this.queryData.inputMin = GMTToStr(this.queryData.grantTime[0]);
        this.queryData.inputMax = GMTToStr(this.queryData.grantTime[1]);
      }
      delete this.queryData.grantTime;
      this.getOrderList(this.queryData);
    },
    handleSizeChange(psize) {
      this.queryData.pageSize = psize;
      //录入日期
      if (this.queryData.grantTime && this.queryData.grantTime[0]) {
        this.queryData.inputMin = GMTToStr(this.queryData.grantTime[0]);
        this.queryData.inputMax = GMTToStr(this.queryData.grantTime[1]);
      }
      delete this.queryData.grantTime;
      this.getOrderList(this.queryData);
    },
    beforeClose() {
      this.suspend.operationCause = null;
    },
    // 删除按钮
    suspendFun(row) {
      this.dialogsuspendFun = true;
      this.suspend.orderNumber = row.orderNumber;
      this.suspendInf.name = row.borrowerName;
    },
    //终止按钮
    submitsuspendFun() {
      let that = this;
      this.$refs.suspendForm.validate().then(() => {
        delOrder(that.suspend).then(res => {
          if (res.code == 200) {
            that.$message({
              message: res.message,
              type: "success"
            });
            that.dialogsuspendFun = false;
            that.getOrderList(that.queryData);
          } else {
            that.$message({
              message: res.message,
              type: "error"
            });
            that.getOrderList(that.queryData);
          }
        });
      });
    }
  }
};
</script>
